<template>
    <div id="importTeac">
        <el-breadcrumb separator="/" class="common-bread">
            <el-breadcrumb-item :to="{ path: '/teacher' }">教师管理</el-breadcrumb-item>
            <el-breadcrumb-item>导入教师</el-breadcrumb-item>
        </el-breadcrumb>

        <div class="contentBox">
            <div class="list_head">
                <span class="head_name">导入教师</span>
                <el-button class="list_btn" type="primary" @click="cancel()">返回</el-button>
            </div>
            <div id="sec_1">
                <p>1、下载导入模板，批量导入教师</p>
                <a href="http://swapp-test-images.oss-cn-hangzhou.aliyuncs.com/node/%E6%95%99%E5%B8%88%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xlsx"
                    class="mylink">导入教师模板下载</a>
            </div>
            <div id="sec_2">
                <div>2、选择并上传文件</div>
                <div id="step2">
                    <span class="select-head-title">选择文件：</span>
                    <el-upload :action="actionUrl" :on-success="handleSuccess" :on-error="handleError" name="uploadFile"
                        :show-file-list='false' class="mybtn">
                        <el-button type="primary">选择文件</el-button>
                    </el-upload>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
    import { mapState, mapActions } from "vuex";

    export default {
        data() {
            return {
                actionUrl: this.$util.domain + "/adminapi/v1/tools/teachers/import",
                headers: {},
            };
        },
        mounted() {

        },
        computed: mapState({ user: state => state.user }),
        //返回
        methods: {
            cancel() {
                this.$util.refreshTo('/#/teacher');
            },

            handleSuccess(response) {
                if (response.error !== 10000) {
                    if (response.error == -10000) {
                        this.$util.errorMsg("服务器开小差");
                    } else {
                        this.$util.errorMsg(response.message);
                    }
                } else {
                    this.$util.successMsg("文件上传成功");

                    let params = {
                        importId: response.data
                    }
                    this.$util.refreshTo("/#/teac-importResult", params);
                }
            },
            handleError(response) {
                if (response.status === 403) {
                    this.SIGNOUT();
                    location.href = "/login";
                }
                this.$util.errorMsg("文件上传失败");
            }
        }
    };
</script>

<style>
    /* #importTeac {
    } */

    #importTeac #sec_1 {
        width: 70%;
        margin-left: 15%;
        height: 100px;
        text-align: center;
        line-height: 30px;
        padding-top: 20px;
        color: #333333;
        border: solid 1px #b2b2b2;
    }

    #sec_2 {
        width: 70%;
        margin-left: 15%;
        height: 210px;
        padding-top: 15px;
        text-align: center;
        color: #333333;
        border: solid 1px #b2b2b2;
        margin-top: 40px;
    }

    #sec_2 .myselect {
        margin-top: 15px;
    }

    #step2 {
        color: #333333;
        margin-top: 20px;
        height: 40px;
        line-height: 40px;
    }

    #step2 .mybtn {
        display: inline-block;
        width: 100px;
        height: 40px;
        vertical-align: middle;
    }

    #step2 .el-upload--text {
        border: 0px;
        width: 100px;
        height: 40px;
    }

    #step2 .el-button {
        border-radius: 0px;
    }

    #sec_1 .mylink {
        color: #0398ff;
    }
</style>